Rebuilds the Angular 21 home route (/) from a dev dashboard into the full Bloqr marketing landing page. The app shell (Material sidenav header/footer) is hidden on / via a reactive isLandingPage signal; all other routes are unaffected.

Description

Rebuilds the Angular 21 home route (/) from a dev dashboard into the full Bloqr marketing landing page. The app shell (Material sidenav header/footer) is hidden on / via a reactive isLandingPage signal; all other routes are unaffected.

Changes

New: 10 standalone section components (frontend/src/app/home/sections/)

Section order matches spec exactly: Nav → Hero → Problem/VPN → Features → HowItWorks → BYO → Audiences → Pricing → CTA Banner → Footer

frontend/src/assets/logo.svg — bundled brand asset

Bloqr logo SVG shipped with the app under frontend/src/assets/. Both NavBarComponent and FooterSectionComponent reference it via assets/logo.svg — eliminates the previous runtime dependency on raw.githubusercontent.com, removes the associated referrer-leakage risk, and ensures compatibility with the SSR worker's img-src 'self' data: CSP policy.

home.component.ts

Replaced dev dashboard composition with landing page section imports. Template is a flat list of section selectors. Inner wrapper changed from <main id="main-content" role="main"> to <div class="landing-content"> to avoid duplicate landmark and duplicate ID with the app shell's own <main>.

styles.css — full design token replacement

• M3 --mat-sys-* overrides: primary #FF5500, navy background #070B14, cyan secondary #00D4FF; dark-mode tokens scoped to body.dark-theme / [data-theme='dark'] so the existing UI light/dark toggle continues to produce a real visual change
• Fonts: Space Grotesk (400/500/600/700) + Inter replacing IBM Plex Sans / Syne; @fontsource/inter pinned to ^5.2.8
• Landing utilities: .bloqr-section, .bloqr-card, .bloqr-btn-primary, .bloqr-btn-ghost, .bloqr-section-label — all brand colors now reference CSS custom properties (no hardcoded hex values); added --color-orange-glow-intense token for hover box-shadow
• Preserves base branch's comprehensive M3 token system: explicit --color-* palette, full --mat-sys-* typography/shape tokens, view transitions, .json-viewer, and toast utilities
• All pre-existing app page utility classes preserved

app.component.ts — shell visibility gating

private isLandingPageUrl(url: string): boolean {
    const normalizedUrl = url.split(/[?#]/u, 1)[0];
    return normalizedUrl === '' || normalizedUrl === '/';
}

readonly isLandingPage = toSignal(
    this.router.events.pipe(
        filter(e => e instanceof NavigationEnd),
        map(e => this.isLandingPageUrl((e as NavigationEnd).urlAfterRedirects)),
    ),
    { initialValue: this.isLandingPageUrl(this.router.url) },
);

URL is normalised (query params and fragments stripped) before comparison so /?utm_source=... deep-links are correctly treated as the landing page. initialValue reads router.url synchronously so direct deep-links to /compiler etc. start with the shell already visible — no flash.

app.component.spec.ts

Mobile viewport test now uses a lightweight StubComponent for the /compiler route instead of AppComponent, preventing the recursive component tree that the previous config created.

index.html

Bloqr title/meta and updated SEO-optimised meta description. Font preload hints intentionally omitted — Angular build uses outputHashing="all", so hash-less <link rel="preload"> hrefs would never match the hashed filenames and would result in wasted 404 prefetches.

frontend/package.json + pnpm-lock.yaml

Removed @fontsource/ibm-plex-sans and @fontsource/syne; updated @fontsource/inter to ^5.2.8. Added "jose@<6.2.2": "6.2.2" to pnpm.overrides and regenerated the lockfile so @better-auth/core resolves consistently to [email protected] across the entire dependency graph (eliminates the previous [email protected] / [email protected] duplication).

worker/routes/docs.routes.ts

Added referrerpolicy="no-referrer" to all three Google Fonts CDN <link> tags in the API docs landing handler for privacy hardening.

Testing

• Unit tests added/updated — app.component.spec.ts updated: mobile hamburger test navigates to /compiler (via StubComponent stub, not AppComponent) before asserting; home.component.spec.ts updated for new component structure (queries .landing-content instead of removed [role="main"])
• Manual testing performed — production build clean, 0 TS/lint errors
• CI passes

Zero Trust Architecture Checklist

Worker / Backend

• Every handler verifies auth before executing business logic — N/A (no worker changes)
• CORS origin allowlist enforced (not *) on write/authenticated endpoints — N/A
• All secrets accessed via Worker Secret bindings (not [vars]) — N/A
• All external inputs Zod-validated before use — N/A
• All D1 queries use parameterized .prepare().bind() (no string interpolation) — N/A
• Security events emitted to Analytics Engine on auth failures — N/A

Frontend / Angular

• Protected routes have functional CanActivateFn auth guards — existing guards unchanged; landing page (/) is public by design
• Auth tokens managed via Clerk SDK (not localStorage) — N/A (landing page has no auth state)
• HTTP interceptor attaches ****** (no manual token passing) — N/A
• API responses validated with Zod schemas before consumption — N/A (landing page makes no API calls)

API Shield / Vulnerability Scanner

• New/changed endpoints have a unique operationId in openapi.yaml — N/A (no API changes)
• Resource endpoints (those with /{id} path parameters) include a security: annotation — N/A
• Resource queries are scoped to the authenticated user (WHERE user_id = ?) — N/A
• Missing/unauthorized resources return 404 (not 403) to avoid leaking resource existence — N/A
• cloudflare-schema.yaml regenerated if openapi.yaml changed (deno task schema:cloudflare) — N/A

Nav → Hero → Problem/VPN → Features → HowItWorks → BYO vs. Ours → Audiences → Pricing → CTA Banner → Footer

position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
height: 64px;
background: rgba(7, 11, 20, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid #1E2D40;

background:
  radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 85, 0, 0.12), transparent),
  radial-gradient(ellipse 60% 40% at 80% 60%, rgba(0, 212, 255, 0.06), transparent),
  #070B14;
padding-top: 96px; /* clear fixed nav */

.section { padding: 96px 0; }
.section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #FF5500; margin-bottom: 16px; }
.section-title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: #F1F5F9; margin-bottom: 16px; }
.section-desc { font-size: 1.05rem; color: #94A3B8; line-height: 1.65; }

background: #0E1829;
border: 1px solid #1E2D40;
border-radius: 12px;
padding: 24px;

This pull request was created from Copilot chat.